/* Efecto de fade-out */
.fade-out {
    opacity: 0; /* Desvanecerse */
    transition: opacity 1s ease; /* Transición suave de 1 segundo */
  }
  
.dl-loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--main-bg-color);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.dl-loader-logo{
    width: 100%;
    height: 80%;
    display: block;
    background-color: var(--aux-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.dl-loader-bar{
    width: 100vw;
    height: 20vh;
    display: block;
    position: relative;;
    background-color: var(--main-text-color-hover);
}

.dl-progress-bar {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: yellow;
    width: 0%; /* Inicia con 0% y aumenta dinámicamente */
   
  }
  
  .dl-loader-bar-fill {
    height: 100%; /* Ocupa todo el alto del contenedor de la barra */
    width: 0%; /* Comienza desde 0% y se expande dinámicamente */
    background-color: var(--main-bg-color); /* Color amarillo para la barra de progreso */
    transition: width 0.1s linear; /* Transición suave para el cambio de ancho */
    position: absolute; /* Asegura que esté dentro del contenedor de la barra */
    top: 0;
    left: 0;
  }
  
.dl-loading-title {
    position: absolute;
    top: 0;
    left: 16px;
    z-index: 2;
    font-size: 20vh;
    font-weight: 900;
    color: var(--main-text-color);
    line-height: 100%;
  }

  /* Media queries for small devices */
@media only screen and (max-width: 600px) {
    .dl-loader-bar{
        width: 100vw;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        position: relative;
        background-color: var(--main-text-color-hover);
        padding: 2em;
    }
    .dl-loader-logo{
      height: 90%;
    }
    .dl-logo-container{
      width: 240px;
    }
    .dl-logo-container img:first-child{
      width: 120px;
      padding-bottom: 13px;
    }
    .dl-loading-title {
      left: inherit;
      font-size: 5.5vh;
      padding: 0;
      margin: 0;
      align-self: center;
      top: 50%;
      transform: translateY(-50%);
    }
}

/* Media queries for medium devices */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .dl-loader-bar{
        width: 100vw;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        position: relative;
        background-color: var(--main-text-color-hover);
        padding: 2em;
    }
    .dl-loader-logo{
      height: 90%;
    }
    .dl-loading-title {
      left: inherit;
      font-size: 5.5vh;
      padding: 0;
      margin: 0;
      align-self: center;
      top: 50%;
      transform: translateY(-50%);
    }
}